{% extends "base.html" %}
{% block title %}用户注册{% endblock %}
{% block head %}
	<link type="text/css" href="{{ url_for('static', filename="css/style.css") }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename="include/animate.css") }}">
{% endblock %}
{% block body_property %} onload="draw()" style="background-color: #eedff4"{% endblock %}
{% block content %}
    <div class="container" >
		<div class="row">
			<div class="col-md-9">
				<h1 style="margin: 20px 0px 0px 0px; font-family: Special;color: #000000">BERRYFOLIO</h1>
				<h4 style="font-family: time;color: #29a1af">注册新账号，加入树莓田！</h4>
			</div>
			<a id="ind_a" style="display: none;" href="{{ url_for('home') }}">index</a>
			<a id="log_a" style="display: none;" href="{{ url_for('login') }}">login</a>
			<a id="reg_a" style="display: none;" href="{{ url_for('register') }}">register</a>
			<div class="col-md-1">
       			 <div class="imgbutton indexbutton" style="margin: 15px 0px 0px 0px;" onclick="ind_a.click()"></div>
      		</div>
			<div class="col-md-1">
				<div class="imgbutton logbutton" style="margin: 15px 0px 0px 0px;" onclick="log_a.click()"></div>
			</div>
			<div class="col-md-1">
				<div class="imgbutton signbutton" style="margin: 15px 0px 0px 0px;" onclick="reg_a.click()"></div>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row">
			<div class="col-md-4 ">
                <img width="324" height="450" src={{ url_for('static', filename="images/nya.png") }}>
			</div>
			<div class="col-md-4 .col-md-offset-4">
					<!-- Start Sign In Form -->
				<form class="fh5co-form animate-box" data-animate-effect="fadeIn" method="post" action={{ url_for('register') }}>
					<h2>Sign In</h2>
					<div class="form-group">
						<label for="username" class="sr-only">Username</label>
						<input type="text" class="form-control" id="username" style="font-family: Time;" placeholder="用户名" autocomplete="off" name="username" required>
					</div>
					<div class="form-group">
						<label for="password" class="sr-only">Password</label>
						<input type="password" class="form-control" id="password" style="font-family: Time;"  placeholder="密码" autocomplete="off" name="password" required>
					</div>
					<div class="form-group">
                        <input title="vcode" name="code" value="{{ vcode }}" hidden>
						<label for="check" class="sr-only">验证码</label>
						<input type="text" class="form-control" id="check" style="font-family: Time;"  placeholder="验证码" autocomplete="off" name="vcode" required>
					</div>
					<div class="form-group">
						<label for="remember" style="font-family: Time;">
							<input type="checkbox" id="contract">同意注册条款
							<a href={{ url_for('contract') }}>点击此处查看条款</a>
						</label>
					</div>

					<div class="form-group">
						<p style="font-family: Time;">已经有了账号？ <a href="{{ url_for('login') }}">登陆</a> | <a>忘记密码</a></p>
					</div>
					<div class="form-group">
                        <input style="margin: 0px 0px 0px 250px;" type="submit" title="Register" class="btn-primary" value="">
					</div>
				</form>
					<!-- END Sign In Form -->
			</div>
			<div class="col-md-4">
                <canvas id="myCanvas" width="324" height="450"></canvas>
			</div>
		</div>
	</div>
{% endblock %}
{% block scripts_after_jq %}
    <!-- Placeholder -->
	<script src={{ url_for('static', filename="include/jquery.placeholder.min.js") }}></script>
	<!-- Waypoints -->
	<script src={{ url_for('static', filename="include/jquery.waypoints.min.js") }}></script>
	<!-- Main JS -->
	<script src={{ url_for('static', filename="scripts/main.js") }}></script>
    <script>
		function draw(){
  			var c=document.getElementById("myCanvas"),
       			ctx=c.getContext('2d');
   			c.width=324;
    		c.height=450;
    		ctx.rect(0,0,c.width,c.height);
    		ctx.fillStyle='transparent';//画布填充颜色
    		ctx.fill();


    		var img1 = new Image;
    		img1.src = "static/images/idol.png";
    		img1.onload=function(){
                ctx.drawImage(img1,0,0,324,450);
            };

      		ctx.font = "26px time";
            ctx.fillStyle = "#211b2f";
            var txt="{{ vcode }}";
            ctx.globalCompositeOperation="source-over";
            ctx.fillText(txt, 140, 310);
		}
	</script>
{% endblock %}
